<template>
  <div class="name">
    <div class="tops"  v-if="ishow">
      <div class="logo">
         <img :src=img alt=""  style="margin-right:5px">
         <p  style=" font-size: 16px;">{{name }}</p>
      </div>
      <div @click="openLike" class="guanli">
        <p>管理后台</p>
        <img class="dianji" src="./../../assets/image/dianji.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="type">
        <div style="margin-top: 3px; font-size: 16px; margin-left: 10px">
          所属类型：
        </div>
        <ul class="tabs">
          <li
            v-for="(item, index) in dataList"
            :key="index"
            class="tab"
            :class="{ 'tab-current': index == currentIndex }"
            @click="clickTab(index)"
          >
            <div>
              {{ item.name }}
            </div>
          </li>
        </ul>
      </div>
      <el-form label-width="90px" :model="query">
        <div class="search">
          <el-form-item label="关键词搜索">
            <el-input
              v-model="query.keyWord"
              clearable
              v-on:change="search()"
              placeholder="请输入关键词"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="标题">
            <el-input
              v-on:change="search()"
              v-model="query.title"
              placeholder="请输入新闻标题"
            ></el-input>
          </el-form-item> -->
          <div style="margin-left: 2rem">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </el-form>
      <div class="tables">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          border
        >
          <!-- <el-table-column type="selection" width="55">
       </el-table-column> -->
          <el-table-column
            prop="categoryName"
            align="center"
            label="栏目"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="title" align="center" label="标题">
          </el-table-column>
          <el-table-column
            prop="creatorName"
            align="center"
            label="作者"
            width="130"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="时间" align="center">
            <template slot-scope="scope">{{ scope.row.modifyTime }}</template>
          </el-table-column>
          <!-- <el-table-column
            prop="address"
            width="100"
            align="center"
            label="状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isTop == '0'">未置顶</span>
              <span v-if="scope.row.isTop == '1'">已置顶</span>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="details(scope.row.id)"
                >查看详情</el-button>
              <!-- <el-button size="mini" type="text" @click="newsRejected(scope.row)">驳回</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination :query="query" @getData="getData" :total="total" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { findPage, MbFindPage } from "../../api/index";
export default {
  name: "name",
  props: {},
  data() {
    return {
      ishow: false,
      dataList: [],
      query: {
        offset: 1,
        limit: 10,
        categoryId: "",
        userName: "",
        title: "",
        keyWord:""
      },
      total: 0,
      tableData: [],
      currentIndex: 0,
      newQuery: {
        offset: 1,
        limit: 100,
      },
      img:'',
      name:''
    };
  },
  components: { Pagination },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f6f6f6");
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    openLike() {
      if (
        JSON.parse(sessionStorage.getItem("isSysAdmin")) == true ||
        JSON.parse(sessionStorage.getItem("isAdmin")) == true ||
        sessionStorage.getItem("roleType") !== ""
      ) {
        let roleType = sessionStorage.getItem("roleType");
        if (roleType.indexOf("NEWS-ADMIN") > -1) {
          this.$router.push("/news");
        } else if (roleType.indexOf("APPROVE-ADMIN") > -1) {
          this.$router.push("/newsAudit");
        } else if (
          roleType.includes("NEWS-ADMIN") &&
          roleType.includes("APPROVE-ADMIN")
        ) {
          this.$router.push("/news");
        }
        if (
          JSON.parse(sessionStorage.getItem("isSysAdmin")) == true ||
          JSON.parse(sessionStorage.getItem("isAdmin")) == true
        ) {
          this.$router.push("/home");
        }
      } else {
        return;
      }
    },
    search() {
      this.query.offset = 1;
      // this.from.startDate = this.time[0];
      // this.from.endDate = this.time[1];
      // console.log(this.from);
      this.getData();
      // location.href='dingtalk://dingtalkclient/page/link?url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fpc%2Fquery%2Fpchomepage.htm%3Fcorpid%3Ddingcbcbb63d3edd5478%26type%3D2%26ddtab%3Dtrue'
    },
    reset() {
      this.query = {
        offset: 1,
        limit: this.query.limit,
        categoryId: this.query.categoryId,
        creatorName: "",
        title: "",
        keyWord:""
      };
      this.getData();
    },
    async queryLists() {
      let res = await findPage(this.newQuery);
      if (res.data.status == 100) {
        res.data.data.list.unshift({ name: "全部", id: "999" });

        this.dataList = res.data.data.list;
      }
    },
    clickTab(index) {
      this.currentIndex = index;
      this.getData(this.dataList[index]);
    },
    async getData(row) {
      console.log(
        "%c [ row ]-155",
        "font-size:13px; background:pink; color:#bf2c9f;",
        row
      );
      if (row) {
        row.name == "全部"
          ? (this.query.categoryId = "")
          : (this.query.categoryId = row.id);
      }
      let result = await MbFindPage(this.query);
      if (result.data.status == 100) {
        this.total = result.data.data.total;
        this.tableData = result.data.data.list;
      
      }
    },
    details(id) {
      this.$router.push({
        path: "/details",
        query: {
          id: id,
        },
      });
    },
  },
  created() {
    this.img = sessionStorage.getItem("avatar")
    this.name =  sessionStorage.getItem("name")
    this.getData();
    this.queryLists();
    if (
      JSON.parse(sessionStorage.getItem("isSysAdmin")) == true ||
      JSON.parse(sessionStorage.getItem("isAdmin")) == true ||
      sessionStorage.getItem("roleType") !== ""
    ) {
      this.ishow = true;
    } else {
      return;
    }
  },
};
</script>

<style lang="scss" scoped>
.guanli{
  margin-right:30px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  padding: 0 30px 0px 15px;
  border: 1px solid #fff;
  border-radius: 5px;
  position: relative;
}
.dianji{
  position: absolute;
  top: 20.4%;
  right: 5.5%;
  width: 20px;
}
.logo{
  display: flex;
  margin-right: 20px;
  img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-top: 10px;
  }
}
.tops {
  height: 55px;
  background: #3274ee;
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 55px;
  text-align: right;
  display: flex;
 justify-content: flex-end
}

.search {
  display: flex;
  flex-flow: wrap;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.name {
  margin: 1% 3%;
  height: 100%;
  overflow: scroll;
}

.type {
  display: flex;
}

.tabs {
  // width: 80%;

  display: flex;
  // justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.tab {
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2rem;
  padding: 5px 15px;
  color: #333;
}

.tab-current {
  font-weight: 700;
  color: #fff;
  background: #3274ee;
  padding: 5px 15px;
  border-radius: 5px;
  // border-bottom: 3px solid #fe686c;
}

// .line {
//   width: 20px;
//   margin-left: -0.4rem;
//   transition: all 0.3s;
//   height: 3px;
//   border-radius: 0.04rem;
//   background: #fe686c;
// }
</style>
